<!DOCTYPE html>
<html style="font-size: 100px">
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<!-- <meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection"/> -->
		<meta name="format-detection" content="telephone=yes"/>


		<link href="/css/user.css" rel="stylesheet" type="text/css"/>
		<!-- <link href="./user.css" rel="stylesheet" type="text/css"/> -->
		<style type="text/css">
			.icon {
				 width: 1em; height: 1em;
				 vertical-align: -0.15em;
				 fill: currentColor;
				 overflow: hidden;
			}

	</style>
	</head>
	<body style="font-size: 16px;">
		<script>
				// 禁用整个body下滑
				document.body.addEventListener('touchmove', function (e) {
						e.preventDefault()
				}, {passive: false}) //passive 使阻止默认事件生效，兼容ios,安卓
		</script> 

		<div class="topbtn">
				<div class="icon-cont">
						<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-duihua"></use>
						</svg>
				</div>
				<div class="icon-cont">
						<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-config"></use>
						</svg>
				</div>
		</div>
		<div class="container">
				<div class="user-section">
					<img class="bg" src="./img/user-bg.jpg"></img>
					<div class="user-info-box">
						<div class="portrait-box">
							<!-- <img class="portrait" :src="userInfo.userIcon || './img/missing-face.png'"></img> -->
							<img class="portrait" src="./img/missing-face.png"></img>
						</div>	
						<div class="info-box">
							<span class="username">游客</span>
						</div>
					</div>
					<div class="vip-card-box">
						<img class="card-bg" src="./img/vip-card-bg.png" mode=""></img>
						<div class="b-btn" @click="test()">
							查看权益
						</div>
						<div class="tit">
							<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-huiyuan"></use>
							</svg>
							白金会员
						</div>
						<span class="e-m"></span>
						<span class="e-b"></span>
					</div>
				</div>
				
				<div class="cover-container"
						ontouchstart="coverTouchstart(event)"
						ontouchmove="coverTouchmove(event)"
						ontouchend="coverTouchend(event)" >
				
					<img class="arc" src="./img/arc.png"></img>
					
					<div class="tj-sction">
						<div class="tj-item">
							<span class="num">0.00</span>
							<span>余额</span>
						</div>
						<div class="tj-item" @click="navTo('/pages/cardORcoupon/index')">
							<span class="num">0</span>
							<span>卡/券</span>
						</div>
						<div class="tj-item">
							<span class="num">0</span>
							<!-- <span>健康豆</span> -->
							<a href="http://www.baidu.com">健康豆</a>
						</div>
					</div>
					<!-- 订单 -->
					<div class="order-section">
						<div class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
							<div class="icon-content">
								<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-dingdan"></use>
								</svg>
							</div>
							<span>全部订单</span>
						</div>
						<div class="order-item" @click="navTo('/pages/order/order?state=1')"  hover-class="common-hover" :hover-stay-time="50">
							<div class="icon-content">
								<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-daifukuan"></use>
								</svg>							
							</div>
							<span>待付款</span>
						</div>
						<div class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover"  :hover-stay-time="50">
							<div class="icon-content">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-daishouhuo"></use>
								</svg>
							</div>
							<span>待收货</span>
						</div>
						<div class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover"  :hover-stay-time="50">
							<div class="icon-content">
								<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-yiwancheng"></use>
								</svg>
						</div>
							<span>已完成</span>
						</div>
					</div>
					<!-- 浏览历史 -->
					<div class="history-section">
				<!-- 		<div class="sec-header">
							<span class="yticon icon-lishijilu"></span>
							<span>浏览历史</span>
						</div>
						<scroll-div scroll-x class="h-list">
							<img @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?img&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg" mode="aspectFill"></img>
							<img @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?img&quality=80&size=b9999_10000&sec=1553105231218&di=09534b9833b5243296630e6d5b728eff&imgtype=0&src=http%3A%2F%2Fimg002.hc360.cn%2Fm1%2FM05%2FD1%2FAC%2FwKhQcFQ3iN2EQTo8AAAAAHQU6_8355.jpg" mode="aspectFill"></img>
							<img @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?img&quality=80&size=b9999_10000&sec=1553105320890&di=c743386be51f2c4c0fd4b75754d14f3c&imgtype=0&src=http%3A%2F%2Fimg007.hc360.cn%2Fhb%2FMTQ1OTg4ODY0MDA3Ny05OTQ4ODY1NDQ%3D.jpg" mode="aspectFill"></img>
							<img @click="navTo('/pages/product/product')" src="https://ss2.bdimg.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2691146630,2165926318&fm=26&gp=0.jpg" mode="aspectFill"></img>
							<img @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?img&quality=80&size=b9999_10000&sec=1553105443324&di=8141bf13f3f208c61524d67f9bb83942&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ac9a5548d29b0000019ae98e6d98.jpg" mode="aspectFill"></img>
							<img @click="navTo('/pages/product/product')" src="https://ss0.bdimg.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=191678693,2701202375&fm=26&gp=0.jpg" mode="aspectFill"></img>
						</scroll-div> -->
						<list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell>
		<!-- 				<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/address')"></list-cell>
						<list-cell icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></list-cell>
						<list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></list-cell>
						<list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏"></list-cell> -->
						<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="联系商家: 4008-038-908"></list-cell>
						<!-- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell> -->
						<div class="link-list">
							<div class="link-item"> 
								<div class="left">
									<div class="icon-cont0">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-phone"></use>
											</svg>
									</div>
									<a href="tel:4008-038-908">联系商家:4008-038-908</a>	
								</div>
								<div class="right">
									<div class="icon-cont1">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-qianjin"></use>
											</svg>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>

				<!-- icon -->
				<script src="http://at.alicdn.com/t/font_1341036_l1c94acy289.js"></script>
				<script>
					let startY = 0
					let moveY = 0
					let moving= false
					let pageAtTop = true;
					let coverC = document.querySelector('.cover-container')
					function coverTouchstart(e){
						if(pageAtTop === false){
							return;
						}
						// this.coverTransition = 'transform .1s linear';
						coverC.style.transition = 'transform .1s linear';
						startY = e.touches[0].clientY;
					}

					function	coverTouchmove(e){
						console.log(e)
						moveY = e.touches[0].clientY;
						let moveDistance = moveY - startY;
						if(moveDistance < 0){
							moving = false;
							return;
						}
						moving = true;
						if(moveDistance >= 80 && moveDistance < 100){
							moveDistance = 80;
						}
				
						if(moveDistance > 0 && moveDistance <= 80){
							coverC.style.transform = `translateY(${moveDistance}px)`;
						}
					}

				  function	coverTouchend(){
						if(moving === false){
							return;
						}
						moving = false;
						coverC.style.transition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
						coverC.style.transform = 'translateY(0px)';
					}
				</script>  
	</body>
</html>
